import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import Footer from '../../components/footer/footer';
import 左箭头 from '../../assets/search/向左箭头 (1).png'
import 垃圾桶 from '../../assets/search/垃圾桶.png'

function Search() {
  const [searchText, setSearchText] = useState("");

  const handleItemClick = (text) => {
    setSearchText(text);
  };

  return (
    <div style={{backgroundColor:"#fff"}}>
      <div style={{display:'flex',justifyContent:'space-between',marginTop:"30px"}}>
        <Link to="/" className="back-link">
          <img style={{width:'20px',height:'20px',marginTop:'4px'}} src={左箭头} alt="" />
        </Link>
        <input style={{width:"90%",height:"30px",paddingLeft:"10px",backgroundColor:"#f2f2f2",border:"none",borderRadius:'20px'}} type="text" placeholder="大家都在搜 腹肌" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
      </div>
      <div style={{width:'100%',height:'100px',display:'flex',justifyContent:"space-between"}}>
        <div style={{fontSize:"20px",fontWeight:600,marginTop:"20px",marginLeft:"10px"}}>
          History search
        </div>
        <img style={{width:'20px',height:'20px',marginTop:'24px',marginRight:"10px"}} src={垃圾桶} alt="" />
      </div>
      <div style={{display:"flex",flexWrap: "wrap",width:"100%",height:"80px",marginTop:"-20px"}}>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("腹肌")}>腹肌</div>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("马甲线")}>马甲线</div>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("瘦身")}>瘦身</div>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("减脂")}>减脂</div>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("人鱼线")}>人鱼线</div>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("跑步")}>跑步</div>
        <div style={{backgroundColor:"#f2f2f2",flexBasis: '20%',borderRadius:"10%",lineHeight:'20px',height:"20px",textAlign:"center",marginLeft:"10px"}} onClick={() => handleItemClick("HIT课程")}>HIT课程</div>
      </div>
      <div style={{width:"100%",height:"300px"}}>
        <div style={{fontSize:"20px",fontWeight:600,marginTop:"20px",marginLeft:"10px"}}>Hot search</div>
        <div style={{display:"flex",justifyContent:"space-between",marginTop:"20px"}}>
        <div style={{marginLeft:"10px"}}>
            <div style={{marginBottom:'10px'}}onClick={() => handleItemClick("运动健身")}>运动健身</div>
            <div style={{marginBottom:'10px'}}onClick={() => handleItemClick("腹肌撕裂者")}>腹肌撕裂者</div>
            <div style={{marginBottom:'10px'}}onClick={() => handleItemClick("HIT")}>HIT</div>
            <div style={{marginBottom:'10px'}}onClick={() => handleItemClick("HATA瑜伽")}>HATA瑜伽</div>
          </div>
          <div style={{marginRight:"10px"}}>
            <div style={{marginBottom:'10px'}} onClick={() => handleItemClick("OMINL BASS")}>OMINL BASS</div>
            <div style={{marginBottom:'10px'}} onClick={() => handleItemClick("胸肌")}>胸肌</div>
            <div style={{marginBottom:'10px'}} onClick={() => handleItemClick("上斜哑铃卧推")}>上斜哑铃卧推</div>
            <div style={{marginBottom:'10px'}} onClick={() => handleItemClick("马甲线")}>马甲线</div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  );
}

export default Search;
